$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  .section1 {
    position: relative;
    margin: 8vw 0 3vw 0;

    .pic {
      width: 70vw;
      margin-left: 30vw;

      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .box {
      position: absolute;
      left: 8vw;
      border-radius: 28px;
      background: #FFF;
      padding: 2vw;
      width: 35vw;
      top: 5vw;

      .info {
        .t {
          color: #000;
          font-size: $fontSize_32;
          font-weight: 500;
        }

        .time {
          color: #D5D5D5;
          font-size: $fontSize_16;
          margin: 1vw 0;
        }

        .des {
          color: #666;
          font-size: 20/19.2+vw;
          line-height: 1.6;
        }
      }
    }

    .author {
      position: absolute;
      left: 8vw;
      bottom: 5vw;
      display: flex;
      align-items: center;
      .avator {
        border-radius: 12px;
        background: #D9D9D9;
        height: 64/19.2+vw;
        width: 64/19.2+vw;
      }
      .text{
        margin-left: 1vw;
        .p1{
          color: #666;
          font-size: $fontSize_14;
        }
        .p2{
          color: #111;
          font-size: $fontSize_16;
          margin-top: 5px;
        }
      }
    }
  }

  .section2{
    display: flex;
    margin-top: 5vw;
    .back{
      width: 30vw;
      .btn {
        border-radius: 32.5px;
        background: #02C4D0;
        padding: 0.8vw 1.6vw;
        display: flex;
        width: fit-content;
        align-items: center;
        margin: 0 auto;
        p {
          margin-left: 5px;
          color: #FFF;
          font-size: $fontSize_16;
        }
      }
    }
    .r_box{
      width: 50vw;
      .info{
        font-size: $fontSize_16;
        line-height: 1.8;
        img{
          max-width: 100%;
          object-fit: cover;
        }
      }
      .related{
        margin-top: 2vw;
        .dt{
          color: #000;
          font-size: $fontSize_16;
        }
        .list{
          a{
            color: #000;
            font-size: $fontSize_16;
            display: flex;
            align-items: center;
            margin-top:10px;
            transition: all 600ms;
            &::before{
              content:'';
              display: block;
              height: 8/19.2+vw;
              width: 8/19.2+vw;
              border-radius: 50%;
              background-color: #000;
              transition: all 600ms;
            }
            .st{
              margin: 0  0.5vw;
            }
            .time{
              transform: translateY(2px);
            }
            &:hover{
              color:#02C4D0;
              &::before{
                background-color: #02C4D0;;
              }
            }
          }
        }
      }
    }
  }


  .section5 {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
      }
    }

    .text {
      position: absolute;
      bottom: 35%;
      left: 0;
      width: 100%;
      text-align: center;
      color: #000;
      font-size: $fontSize_40;
    }

    .btn {
      position: absolute;
      left: 50%;
      bottom: -.8vw;
      transform: translateX(-50%);

      .ball {
        width: 133/19.2+vw;
        height: 133/19.2+vw;
      }

      .en {
        img {
          width: 121/19.2+vw;
          height: 121/19.2+vw;
          animation: spin 14s linear infinite;
        }
      }

      @keyframes spin {
        100% {
          transform: rotate(1turn);
        }
      }

      .en,
      p {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      p {
        color: white;
        font-size: $fontSize_18;
      }

      .icon {
        position: absolute;
        right: 30/19.2+vw;
        top: 30/19.2+vw;
        width: 24/19.2+vw;
        height: 24/19.2+vw;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top:70px;
    .section1{
      margin: 0 auto;
      .box{
        position: static;
        width: 90%;
        margin: 0 auto;
        border-radius: 10px;
        .info{
          .t{
            font-size: 18px;
            line-height: 1.6;
          }
          .time{
            font-size: 14px;
          }
          .des{
            font-size: 14px;
          }
        }
      }
      .pic{
        margin-left: 5%;
        width: 95%;
      }
      .author{
        position: static;
        width: 90%;
        margin: 20px auto;
        .avator{
          width: 80px;
          height: 80px;
        }
        .text{
          margin-left: 10px;
          .p1{
            font-size: 16px;
          }
          .p2{
            font-size: 14px;
          }
        }
      }
    }
    .section2{
      width: 90%;
      margin: 20px auto;
      flex-direction: column-reverse;
      .r_box{
        width: 100%;
        .info{
          font-size: 14px;
        }
        .related{
          margin: 20px 0;
          .dt{
            font-size: 16px;
          }
          .list{
            a{
              font-size: 14px;
              &::before{
                width: 5px;
                height: 5px;
              }
              p{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .st{
                width: 70%;
                margin: 0 10px;
              }
            }
          }
        }
      }
      .back{
        .btn{
          padding: 8px 20px;
        }
      }
    }
    .section5{
      margin-bottom: 30px;
      .text{
        font-size: 16px;
        bottom:40%;
      }
      .btn{
        bottom:-30px;
        .ball{
          width: 60px;
          height: 60px;
        }
        .en{
          img{
            width: 55px;
            height: 55px;
          }
        }
        .icon{
          width: 15px;
          height: 15px;
          right:10px;
          top:10px; 
          display: none;
        }
        p{
          font-size: 12px;
        }
      }
    }
  }
}